<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

    <div>
      <a-spin :spinning="confirmLoading">
        <j-form-container>
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <!--<a-col :span="24">
                <a-form-model-item label="公海库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="highSeasDepot">
                  <a-select  style="width: 100%" v-model="model.highSeasDepot" placeholder="请选择">
                    <a-select-option value="1">废单库</a-select-option>
                    <a-select-option value="2">市场部废单库</a-select-option>
                    <a-select-option value="3">店面废单库</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>-->
              <a-col :span="24">
                <a-form-model-item label="废单原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="scrapOrderCause">
                  <j-dict-select-tag v-model="model.scrapOrderCause" @change="changeScrapOrderCause" title="废单原因" dictCode="gh_customer_submit_scrap_order_cause" placeholder="请选择"/>
                  <!--<a-select  style="width: 100%" v-model="model.scrapOrderCause" placeholder="请选择" @change="handleChange">
                    <a-select-option value="jack">废单库</a-select-option>
                    <a-select-option value="lucy">废单原因</a-select-option>
                    <a-select-option value="Yiminghe">备注</a-select-option>
                  </a-select>-->
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
                  <a-textarea
                    style="width: 100%"
                    v-model="model.remarks"
                    placeholder="请输入备注"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </a-spin>
    </div>
  </j-modal>
</template>

<script>
  import { postAction } from '@/api/manage'
  export default {
    name: "scrapBillModal",
    data () {
      return {
        title: '',
        width: 500,
        visible: false,
        disableSubmit: false,
        model: {},
        scrapOrderCauseValue: "",
        currentCustomerId: 0,
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {
          highSeasDepot: [{required: true, message: '请选择公海库!'}],
          scrapOrderCause: [{required: true, message: '请选择废单原因!'}],
        },
        url: {
          scrapBillUrl: "/ghCustomerSubmit/scrapBill",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add (record) {
        this.visible = true;
        this.model = Object.assign({}, record);
      },
      close () {
        this.visible = false;
        this.model = {};
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let params = {};
            params.customerId = this.model.id;
            params.name = this.model.name;
            params.phone = this.model.phone;
            params.address = this.model.address;
            params.progress = this.model.progress;
            params.houseType = this.model.houseType;
            params.houseArea = this.model.houseArea;
            params.decorationStyle = this.model.decorationStyle;
            params.highSeasDepot = this.model.highSeasDepot;
            params.scrapOrderCause = this.model.scrapOrderCause;
            params.scrapOrderCauseValue = this.scrapOrderCauseValue;
            params.remarks = this.model.remarks;
            postAction(this.url.scrapBillUrl,params).then((res)=>{
              if(res.success){
                that.$message.success("已发起审批");
                that.$emit('scrapBillOk');
                this.close()
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
      changeScrapOrderCause(value){
        switch (parseInt(value)) {
          case 1:
            this.scrapOrderCauseValue = "只是咨询"
            break;
          case 2:
            this.scrapOrderCauseValue = "信息有误"
            break;
          case 3:
            this.scrapOrderCauseValue = "同行抢单"
            break;
          case 4:
            this.scrapOrderCauseValue = "价格太高"
            break;
          case 5:
            this.scrapOrderCauseValue = "设计不理想"
            break;
        }
      },
    }
  }
</script>
<style scoped>
</style>